<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div data-editor>
        hello editor
    </div>
    <script>
        document.onclick = function (e) {
            const target = e.target;
            const editor = target.dataset.editor;
            if (editor !== undefined) {
                // 1. 创建textarea多行文本
                const textarea = `<textarea onblur="textBlur(this)" id="textarea">${target.innerText}</textarea>`;
                // 2. 将texearea插入到editor
                target.outerHTML = textarea;
                // 3. 获取焦点
                document.getElementById('textarea').focus();
            }
        }
        function textBlur(_this) {
            // 1. 创建 div 多行文本
            const div = `<div data-editor>
                ${_this.value}
            </div>`;
            //  将div插入到texearea
            _this.outerHTML = div;
        }






    </script>
</body>

</html>